\section{CSS的取值} % (fold)
\label{sec:取值}

\subsection{长度} % (fold)
\label{sub:长度}
长度是对距离的测量。长度由数字和紧随其后的单位组成。如果长度为0，则单位可以忽略。有些属性还允许负值。

长度可分为相对长度和绝对长度。相对长度指的是相对与其他长度属性而言，相对长度又分为文本相对长度和视图窗口相对长度。

\subsubsection{文本相对长度} % (fold)
\label{ssub:文本相对长度}
\begin{description}
	\item[em] 相对于当前对象内文本的字体尺寸
	\item[ex] 相对于字符“x”的高度。通常为字体高度的一半
	\item[ch] 数字“0”的宽度
	\item[rem] 相对于根元素(即html元素)font-size计算值的倍数
\end{description}

em是常用的相对长度单位，em的长度会基于元素的字体大小进行计算，最常用的用法是首行缩进两个字符：

\begin{lstlisting}
text-indent:2em;
\end{lstlisting}

上述的例子中，如果元素中的字体大小为16px，则文本首行缩进的量为32px。
% subsubsection 文本相对长度 (end)

\subsubsection{视图窗口相对长度} % (fold)
\label{ssub:视图窗口相对长度}
\begin{description}
	\item[vw] 相对于视口的宽度。视图窗口被均分为100单位的vw
	\item[vh] 相对于视口的高度。视图窗口被均分为100单位的vh
	\item[vmax] 相对于视图窗口的宽度或高度，总是相对于大的那个。视图窗口的宽度或高度被均分为100单位的vmax
	\item[vmin] 相对于视图窗口的宽度或高度，总是相对于小的那个。视图窗口的宽度或高度被均分为100单位的vmin
\end{description}
% subsubsection 视图窗口相对长度 (end)

\subsubsection{绝对长度} % (fold)
\label{ssub:绝对长度}
绝对长度是最简单的长度单位，绝对长度单位有：

\begin{description}
	\item[cm] 厘米
	\item[mm] 毫米
	\item[q] 0.25毫米
	\item[in] 英寸，1英寸 = 2.54厘米
	\item[pt] 点，1pt = 1/72in
	\item[pc] 派卡，1pc = 12pt
	\item[px] 像素，1px = 1/96in
\end{description}

其中经常使用的绝对单位是像素px。1英寸相当于96个像素，像素虽然是绝对单位，但是在不同的设备，尤其是高密度显示设备和低密度显示设备上的效果并非完全一致。如图\ref{fig:pixel}所示：

\begin{figure}[htbp]
	\centering
	\includegraphics[width=120mm]{raw/pixel.png}
	\caption{不同显示密度中的像素}
	\label{fig:pixel}
\end{figure}

px 与 pt 是两个看起来很像、却完全不一样的单位(在某些场合他们是1：1的)，在很多时候却常常被搞混，或是制作过程根本没有分清楚、导致结果没有很精确。pt是常见的标示文字尺寸的单位，在绘图以及文书软件等几乎都是使用pt作为字体尺寸的单位。px像素，是屏幕上所显示的最小单位，当制作的内容是供屏幕浏览时，使用px可以精确的控制画面上显示效果。但也因为每个屏幕分辨率不同，像素的大小也不固定。在分辨率高的屏幕上，一个像素可能会小到肉眼无法辨识的大小。

pt与px理解起来其实不难，在应用的时候其实也相当单纯，在大部分的情况下适用的一个原则是：当设计的目的是用于供屏幕浏览，则趋向于使用px以方便掌握细节；而如果是为了做输出打印的需求,使用pt则是较好的选择。因此，在网站前端开发中，人们经常使用的单位是px，而不是pt。\cite{Chang-2014}

\subsection{百分比} % (fold)
\label{sub:百分比}
百分比由数字和紧随其后的“％”符号构成。百分比值始终是相对于另外一个值而言的，比如相对于长度。例如：

\begin{lstlisting}
p { font-size: 10px }
p { line-height: 120% }
\end{lstlisting}

上面例子中的line-height值，最终计算出来应该为12px。

\subsection{颜色} % (fold)
\label{sub:颜色}
在CSS中，可通过color属性为元素指定字体颜色。在CSS2中，颜色由三种表示方法：颜色名称、十六进制颜色值和rgb函数形式的颜色值。其中颜色名称只能在预设的16种颜色名称中选择，这16种预设的颜色名称分别是：black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、oliver、yellow、navy、blue、teal、aqua。如：

\begin{lstlisting}
p {
	color: black;
}
\end{lstlisting}

上述规则将使段落的颜色为黑色。

color属性的值还可以采用16进制来表示，如：

\begin{lstlisting}
p {
	color: #333333;
}
\end{lstlisting}

\#表示其后的数值为16进制，通常情况下是6位数字，分别表示RRGGBB，即红色分量的颜色值、绿色分量的颜色值、蓝色分量的颜色值。如果\#RRGGBB分别都由重复数字组成，那么还可以简写成为\#RGB。

除了使用颜色名称、十六进制之外，颜色值还可以通过rgb函数表示，如：

\begin{lstlisting}
p {
	color: rgb(25%,25%,30%);
}
\end{lstlisting}

其中rbg函数的三个参数值分别表示的是红色、绿色和蓝色的颜色分量。

在CSS3中，还新增了 RGBA, HSL, HSLA 三种颜色表示方法。\cite{W3C-2011a}

RGBA模式与RGB相同，只是在RGB模式上新增了Alpha透明度。如：

\begin{lstlisting}
p {
	color: rgba(25%,25%,30%,0.2);
}
\end{lstlisting}

最后一个参数值表示颜色的透明程度，0表示完全透明，1表示不透明。

HSL是另外一种常用的颜色表示体系，其中：
\begin{description}
	\item[H]  Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
	\item[S]  Saturation(饱和度)。取值为：0.0\% - 100.0\%
	\item[L]  Lightness(亮度)。取值为：0.0\% - 100.0\%
\end{description}

例如：

\begin{lstlisting}
.task {
  background: hsl(0, 100%, 25%);
}
\end{lstlisting}

HSLA颜色体系，增加了透明度，例如：

\begin{lstlisting}
.task {
  background: hsla(0, 100%, 25%, .25);
}
\end{lstlisting}

\subsection{角度} % (fold)
\label{sub:角度}
CSS中，角度的单位有	deg, grad, rad, turn。
\begin{description}
	\item[deg] 度，角度单位，值的范围是0-360度，可以是负值。
	\item[grad] 梯度（Gradians）。一个圆共400梯度，90度就是100梯度。
	\item[rad] 弧度（Radians）。一个圆共2π弧度。
	\item[turn] 圈（Turns）。一个圆共1圈。
\end{description}

